{{define "login/register.html"}}

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>账号注册</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="robots" content="all,follow">
        <!-- Bootstrap CSS-->
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/style.default.css"  crossorigin="anonymous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    </head>

    <div class="page login-page">
        <div class="container d-flex align-items-center">
            <div class="form-holder has-shadow">
                <div class="row">
                    <!-- Logo & Information Panel-->
                    <div class="col-lg-6">
                        <div class="info d-flex align-items-center">
                            <div class="content">
                                <div class="logo">
                                    <h1>欢迎注册</h1>
                                </div>
                                <p>Golang gin框架注册demo</p>
                            </div>
                        </div>
                    </div>
                    <!-- Form Panel    -->
                    <div class="col-lg-6 bg-white">
                        <div class="form d-flex align-items-center">
                            <div class="content">
                                <form method="post" action="/login/register" class="form-validate" id="loginFrom">
                                    <div class="form-group">
                                        <input id="register-username" type="text" name="userName" required data-msg="请输入用户名" placeholder="用户名" value="" class="input-material">
                                    </div>
                                    <div class="form-group">
                                        <input id="register-password" type="password" name="passWord" required data-msg="请输入密码" placeholder="密码" class="input-material">
                                    </div>
                                    <div class="form-group">
                                        <input id="register-passwords" type="password" name="passWord" required data-msg="确认密码" placeholder="密码" class="input-material">
                                    </div>
                                    <button id="regbtn" type="submit" class="btn btn-primary">注册</button>
                                </form>
                                <br />
                                <small>已有账号?</small><a href="index" class="signup">&nbsp;登陆</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- JavaScript files-->
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"></script>
    <script src="/static/js/vendor/jquery-validation/jquery.validate.min.js"></script><!--表单验证-->

    <script>
        $(function(){
            /*错误class  form-control is-invalid
            正确class  form-control is-valid*/
            var flagName=false;
            var flagPas=false;
            var flagPass=false;
            /*验证用户名*/
            var name,passWord,passWords;
            $("#register-username").change(function(){
                name=$("#register-username").val();
                if(name.length<2||name.length>10){
                    $("#register-username").removeClass("form-control is-valid")
                    $("#register-username").addClass("form-control is-invalid");
                    flagName=false;
                }else{
                    $("#register-username").removeClass("form-control is-invalid")
                    $("#register-username").addClass("form-control is-valid");
                    flagName=true;
                }
            })
            /*验证密码*/
            $("#register-password").change(function(){
                passWord=$("#register-password").val();
                if(passWord.length<6||passWord.length>18){
                    $("#register-password").removeClass("form-control is-valid")
                    $("#register-password").addClass("form-control is-invalid");
                    flagPas=false;
                }else{
                    $("#register-password").removeClass("form-control is-invalid")
                    $("#register-password").addClass("form-control is-valid");
                    flagPas=true;
                }
            })
            /*验证确认密码*/
            $("#register-passwords").change(function(){
                passWords=$("#register-passwords").val();
                if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
                    $("#register-passwords").removeClass("form-control is-valid")
                    $("#register-passwords").addClass("form-control is-invalid");
                    flagPass=false;
                }else{
                    $("#register-passwords").removeClass("form-control is-invalid")
                    $("#register-passwords").addClass("form-control is-valid");
                    flagPass=true;
                }
            })


            $("#regbtn").click(function(){
                if(flagName&&flagPas&&flagPass){
                    // localStorage.setItem("name",name);
                    // localStorage.setItem("passWord",passWord);
                    // location="login.html"
                    $.post("register",{username:name,pwd:passWord},function(res){
                        console.log(res)
                    })
                }else{
                    if(!flagName){
                        $("#register-username").addClass("form-control is-invalid");
                    }
                    if(!flagPas){
                        $("#register-password").addClass("form-control is-invalid");
                    }
                    if(!flagPass){
                        $("#register-passwords").addClass("form-control is-invalid");
                    }
                }
                return false;
            })
        })
    </script>
{{end}}